<template>
  <div class="input-sno">
    <n-card title="💻 关于知识竞赛">
      有一说一，这件事大家懂得都懂，不懂得，说了你也不明白，不如不说。你们也别来问我怎么了，利益牵扯太大，说了对你们也没什么好处，当不知道就行了，其余的我只能说这里面水很深，牵扯到很多大人物。详细资料你们自己找是很难找的，网上大部分已经删除干净了，所以我只能说懂得都懂，不懂得也没办法。
    </n-card>
    <n-input v-model:value="sno" placeholder="请输入学号">
      <template #prefix>
        <n-icon size="18" color="#808695">
          <PersonOutline />
        </n-icon>
      </template>
    </n-input>
    <n-button
      type="primary"
      size="large"
      :loading="loading"
      block
      @click="handleSubmit"
    >
      登录
    </n-button>
    <n-button v-if="showToAdmin" size="large" block @click="toAdminPage">
      后台
    </n-button>
  </div>
</template>

<script setup>
import { ref, watch, unref, reactive } from 'vue'
import { useLoadingBar } from 'naive-ui'
import { PersonOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'
import { useExamSetting } from '@/store/modules/examSetting'

const examSetting = useExamSetting()
const router = useRouter()
const loadingBar = useLoadingBar()
const loading = ref(false)

const showToAdmin = ref(false)
watch(
  () => examSetting.getShowToAdmin,
  val => {
    showToAdmin.value = val
  }
)

examSetting.getExamSetting()

let sno = ref('')
const handleSubmit = () => {
  loading.value = true
  loadingBar.start()
  setTimeout(() => {
    loading.value = false
    loadingBar.finish()
  }, 1000)
}
const toAdminPage = () => {
  router.push({ name: 'admin-test' })
}
</script>

<style lang="less">
.input-sno {
  display: flex;
  flex-direction: column;

  .n-input {
    margin: 20px 0;
  }

  .n-button {
    margin: 20px 0;
  }
}
</style>
